<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.11.1.js"></script>
    <script type="text/javascript">
        /*$(function () {});*/
        // 作用等同于： window.onload
         $(window).load(function () {
            // 获取到的是 top 的高度，此处是通过 nav的 offset 来获取到的
            // var navHeight = $(".nav").offset().top;
            // 获取top的高度值
            var navHeight = $(".top").height();
            $(window).scroll(function () {
                // 获取到文档上方被卷去的高度
                var scrollTop = $(document).scrollTop();

                // console.log(scrollTop);
                // 如果 scrollTop 大于等于 navHeight的时候，让 nav 变为固定定位
                if(scrollTop >= navHeight) {
                    // $(".nav").css("position", "fixed");
                    $(".nav").css({
                        "position": "fixed",
                        "top": 0
                    });

                    $(".main").css("margin-top", $(".nav").height());
                } else {
                    // 恢复原来的样式状态
                    $(".nav").css("position", "static");
                    $(".main").css("margin-top", 0);
                }
            });
        });
    </script>
</head>
<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />
</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>

</html>
